<template>
  <div class="title">
    <div class="top">
      <span>{{ info.title }}</span>
    </div>
    <div class="bottom">
      <span>编辑：{{ info.author }}</span>
      <span style="margin: 0 10px;">发布：{{ info.created_at }}</span>
      <span>浏览：{{ info.hits }}</span>
    </div>
  </div>
  <div class="file-content" v-html="info.content"></div>
</template>
<script setup>
import { getFileDetail } from './api'
import { useRoute } from 'vue-router'
import { ref } from 'vue'
const Route = useRoute()
const id = Route.query.id
const info = ref({})
getFileDetail({ api_key: 'ER^%Tw', id}).then(res => {
  if (res.code == 1) {
    info.value = res.data
  }
})
</script>
<style scoped>
.top {
  color: #222;
  font-size: 16px;
  font-weight: 700;
}
.bottom {
  font-size: 12px;
  color: #979797;
  margin: 10px 0;
}
.title {
  margin: 20px;
  border-bottom: 1px solid #efefef;
}
.file-content {
  padding: 20px;
}
</style>